/********************************************
事件审核页面
** */
<template>
  <div class="mod-config">
    <basic-container>

      <!--头部 流程走势图-->
      <headDailyExnamine :sign="{ a: false, b: true, c: false,d: false,e: false,f: false}"></headDailyExnamine>

      <!--搜索条件-->
      <div  class="boxsty zhiBiao">
        <div :height="searchheight">
          <span
            style="float:right;margin-top: -30px;cursor: pointer;"
            @click="searchchangeadvanced"
          >
            {{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
            />
          </span>
          <div v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="searchForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
            >
              <el-form-item label="标题">
                <el-input v-model="searchForm.sjbt" placeholder="请输入标题关键字" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="描述">
                <el-input v-model="searchForm.sjdesc" placeholder="请输入描述" :clearable="true"></el-input>
              </el-form-item>
              <el-form-item label="考核周期">
                <el-select
                  v-model="searchForm.khzq"
                  placeholder="请选择周期"
                  class="xiaLa"
                  @change="searchByZq"
                  style="width: 100%"
                  :clearable="true"
                >
                  <el-option
                    v-for="(item, index) in kezqsList"
                    :key="index"
                    :label="item.name"
                    :value="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  @click="getDataList(1)"
                >检索</el-button><!--v-if="permissions.zxgz_zxgzgzcj_view"-->
              </el-form-item>
            </el-form>
          </div>
      </div>

        <!--同意 驳回 操作按钮-->
        <div class="mt10" style="overflow:hidden;border-bottom: 1px solid #b0bde2;">
          <div style="display:flex;justify-content:space-between;margin-bottom: 10px">
            <div><el-button type="primary" @click="download">导出</el-button></div>
            <div>
              <el-button
                :disabled="isAgreeOrRefuse"
                @click="handleAgree(1)"
                type="primary"
                v-if="permissions.rckhsjkh_view_sub"
              >同意</el-button>
              <el-button
                :disabled="isAgreeOrRefuse"
                @click="handleAgree(0)"
                type="danger"
                v-if="permissions.rckhsjkh_view_sub"
              >驳回</el-button>
            </div>
          </div>
        </div>

        <!--table标签 切换-->
        <div style="margin-top: 20px">
          事件考核
          <span>
                <el-radio v-model="radio" label="1">人员</el-radio>
                <el-radio v-model="radio" label="2">机构</el-radio>
              </span>
        </div>

        <!--数据列表-->
        <el-table
          style="width: 100%;margin-top:20px"
          :data="dataList"
          border
          stripe
          header-align="center"
          v-loading="dataListLoading"
          v-if="rednermsg"
          @selection-change="handleSelectionChange"
          @cell-click="unfoldBtn"
        >
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column type="index"  :index="indexMethod" header-align="center" align="center" label="序号" width="70"></el-table-column>
          <el-table-column prop="sjbt" align="center" label="标题" show-overflow-tooltip  sortable></el-table-column>
          <el-table-column prop="sjdesc" align="center" label="描述" show-overflow-tooltip  sortable></el-table-column>
          <el-table-column prop="khdxs" align="center" label="考核对象"  sortable >
            <template slot-scope="scope">
              <div v-if="scope.row.rowshows == false">
                  <span v-for="item in scope.row.khdxs.split(',')"
                  >{{ item }}<br
                  /></span>
              </div>
              <div
                v-if="scope.row.rowshows == true"
                v-for="(item, index) in cutout(scope.row.khdxs).slice(
                    0,
                    2
                  )"
                :key="index"
              >
                <el-badge
                  :value="cutout(scope.row.khdxs).length"
                  :max="9"
                  v-if="
                      cutout(scope.row.khdxs).length > 2 && index === 0
                    "
                  class="itembadge"
                >
                  <span>{{ item }}</span>
                </el-badge>
                <span v-else>{{ item }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="khzq" align="center" label="考核周期"  sortable></el-table-column>
          <el-table-column prop="createTime" align="center" label="创建时间" width="200"  sortable></el-table-column>
          <el-table-column prop="status" align="center" label="状态" >
            <template slot-scope="scope">
              <div>
                <el-popover placement="top" width="660" trigger="hover">
                  <el-table :data="scope.row.gridData" max-height="400">
                    <el-table-column
                      width="260"
                      property="NAME_"
                      label="任务名称"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      width="120"
                      property="ry_name"
                      label="处理人"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      width="120"
                      property="START_TIME_"
                      label="开始时间"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      width="120"
                      property="END_TIME_"
                      label="结束时间"
                      show-overflow-tooltip
                    ></el-table-column>
                  </el-table>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="showMessage(scope.row.proceId)"
                  >流程跟踪</el-button>
                  <span slot="reference">{{scope.row.status |transState}}</span>
                </el-popover>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" fixed="right" width="100" label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                plain
                size="small"
                @click.stop.prevent="dataView(scope.row)"
              >查看</el-button><!-- v-if="permissions.zxgz_zxgzgzcj_view"-->
            </template>
          </el-table-column>
        </el-table>

        <!--分页-->
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </div>

    </basic-container>

    <!--流程详情弹框-->
    <el-dialog :visible.sync="showPicDialog" title="流程图" width="90%">
      <div>
        <el-row :gutter="20">
          <el-col :span="11">
            <el-image
              v-if="showPicDialog"
              :headers="headers"
              :src="actPicUrl"
              :preview-src-list="actPicUrlList"
              width="100%"
              class="bg"
            ></el-image>
          </el-col>
          <el-col :span="13">
            <el-table :data="hisTableData" border style="width: 100%">
              <el-table-column prop="taskId" label="任务ID" width="90"></el-table-column>
              <el-table-column prop="processInstanceId" label="流程实例ID" width="110"></el-table-column>
              <el-table-column prop="taskName" label="任务名称"  min-width="110"></el-table-column>
              <el-table-column prop="assignee" label="处理人" min-width="110">
                <template slot-scope="scope">
                  <span
                    v-if="
                        scope.row.taskName == '部门绩效考核联络员任务填报'&& scope.row.flag
                      "
                  >
                    {{ scope.row.assignee}}
                    <i
                      style="
                          margin-left: 5px;
                          color: #1a71fb;
                          cursor: pointer;
                        "
                      @click="showUserNd(scope.row)"
                      class="el-icon-edit-outline"
                    ></i>
                  </span>
                  <span v-else-if="scope.row.flag">
                    {{ scope.row.assignee }}
                    <i
                      style="
                          margin-left: 5px;
                          color: #1a71fb;
                          cursor: pointer;
                        "
                      @click="showUser(scope.row.taskId)"
                      class="el-icon-edit-outline"
                    ></i>
                  </span>

                  <span v-else>{{ scope.row.assignee }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="start" label="开始时间" width="150"></el-table-column>
              <el-table-column prop="end" label="结束时间" width="150"></el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

    <!--选择部门人员组件-->
    <UserCommonSelectTask v-if="usercommentTask" ref="userTask" @submitfy="submitfyTask"></UserCommonSelectTask>
    <detailView v-if="detailVisible" ref="detailNode" @closeDialog="closeDialog1" @refreshDataList="refreshDataList"></detailView>
    <processTracking
      ref="processTracking"
      @processTrackingChildren="getDataList"
    ></processTracking>
  </div>
</template>

<script>
    // 接口 api
    import {eventExamineList,leaderAudition,showUserName,dataDetail,leaderAuditionRefuse,showRefuseUserName} from "@/api/dailyExamine/eventExamine/eventExamine.js";
    import {getKhzqSelect,changeAss,exportExcelExamin} from "@/api/dailyExamine/eventExamine/event.js";
    import detailView from "@/views/dailyExamine/eventExamine/eventExamine/detailView";
    import UserCommonSelectTask from "@/views/dailyExamine/components/usercomment-select";
    import { mapGetters, mapState } from "vuex";
    import { showMessage } from "@/api/activiti/task";
    import processTracking from "@/views/dailyExamine/components/processTracking";
    import store from "@/store";
    export default {
        components: {
            detailView,
            UserCommonSelectTask,
            processTracking
        },
        data() {
            return {
                headers: {
                    Authorization: "Bearer " + store.getters.access_token
                },
                detailVisible: false,
                joinConfirmVisible: false,
                isAgreeTitle: "同意",
                radio:'1',
                dataForm: {},
                searchForm: {},
                multipleSelection: [], //表格中被选中的数据
                dataList: [],
                hisTableData: [],
                actPicUrlList: [],
                actPicUrl: "",
                showPicDialog: false,
                usercommentTask: false,
                getCryItem:"",
                dataListLoading: false,
                searchadvanced: true,
                searchheight: "0",
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                isAgreeOrRefuse: true,
                canConfirm: true,
                type:0,// 0 驳回 1同意
                getCryItem:"",
                rednermsg: true,
                kezqsList: [],
            };
        },
        filters: {
            transState(val) {
                switch (val) {
                    case 1:
                        return "起草中";
                        break;
                    case 2:
                        return "审核中";
                        break;
                    case 3:
                        return "审核驳回";
                        break;
                    case 4:
                        return "评审中";
                        break;
                    case 5:
                        return "确认中";
                        break;
                    case 10:
                        return "已完成";
                        break;
                    default:
                        break;
                }
            }
        },
        watch: {
            radio(value) {
                this.pageIndex = 1;
                if (value) {
                    this.dataList = [];
                    this.getDataList();
                }
            }
        },
        created() {
            this.getDataList();
            this.getKhzq();//考核周期
        },
        computed: {
            ...mapGetters(["permissions"])
        },
        methods: {
            //考核对象展示
            unfoldBtn(row) {
                row.rowshows = !row.rowshows;
                this.rednermsg = false;
                this.$nextTick(() => {
                    this.rednermsg = true;
                });
            },
            searchchangeadvanced() {
                this.searchadvanced = !this.searchadvanced;
                if (this.searchadvanced) {
                    this.searchheight = "auto";
                }
            } ,
            //点查看 查询详情
            dataView(row) {
              //  row.id = "30052";
                dataDetail(row.id).then(r => {
                    this.detailVisible = true;
                    this.$nextTick(() => {
                        this.$refs.detailNode.init(r.data.data);
                    });
                });
            },
            // 勾选数据
            handleSelectionChange(val) {
                this.multipleSelection = val;
                let agreeOrRefuse = val.every(it => { //every数组中检测到有一个元素不满足，则整个表达式返回 false
                    return it.status == 2;
                });

                if (val.length == 0) {
                    this.isAgreeOrRefuse = true;
                } else {
                    if (agreeOrRefuse) {
                        this.isAgreeOrRefuse = false;
                    } else {
                        this.isAgreeOrRefuse = true;
                    }
                }
            },
            // 确定 同意/驳回
            confirmAgree() {
                let ids = this.multipleSelection.map(it => {
                    return it.id;
                });
                console.log("ids"+ids) ;
                if (this.type==1){
                  leaderAudition(ids.toString(), this.type).then(r => {
                      if (r.data.code == 0) {
                          this.$message.success("操作成功");
                          this.getDataList();

                      } else {
                          this.$message.error(r.data.msg);
                      }
                  });
                }else{
                    leaderAuditionRefuse(ids.toString(), this.type).then(r => {
                        if (r.data.code == 0) {
                            this.$message.success("操作成功");
                            this.getDataList();

                        } else {
                            this.$message.error(r.data.msg);
                        }
                    });
                }
            },

            // 同意/驳回
            handleAgree(type) {
                let that = this ;

                let ids = this.multipleSelection.map(it => {
                    return it.id;
                });

                if (this.multipleSelection.length == 0) { //未勾选
                    this.$message.warning("请先选择数据");
                    return;
                }else if(this.multipleSelection.length == 1){//勾选一条
                    if (type == 1) {
                        //同意
                        this.type = 1 ;
                        showUserName(ids.toString()).then(r => {
                           console.log(r.data);
                           this.getCryItem=r.data.msg;
                            const h = this.$createElement;
                            this.$msgbox({
                                title: '同意',
                                message: h('p', null, [
                                    h('span',  { style: 'font-size: 14px' },this.getCryItem.toString() ),
                                ]),
                                showCancelButton: true,
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                beforeClose: (action, instance, done) => {
                                    if (action === 'confirm') {
                                        //调用同意接口
                                        this.confirmAgree();
                                        done();
                                    } else {
                                        done();
                                    }
                                }
                            }).then(action => {
                            });
                        });
                    } else {
                        // 驳回
                        this.type = 0 ;
                        showRefuseUserName(ids.toString()).then(r => {
                            console.log(r.data)
                          this.getCryItem=r.data.msg;
                          const h = this.$createElement;
                          this.$msgbox({
                              title: '驳回',
                              message: h('p', null, [
                                  h('span', { style: 'font-size: 16px' }, this.getCryItem.toString() ),
                              ]),
                              showCancelButton: true,
                              confirmButtonText: '确定',
                              cancelButtonText: '取消',
                              beforeClose: (action, instance, done) => {
                                  if (action === 'confirm') {
                                      this.confirmAgree() ;
                                      done();
                                  } else {
                                      done();
                                  }
                              }
                          }).then(action => {

                          });
                        })
                    }
                }else{
                    let bhArr = this.multipleSelection.map(it => {
                        return it.sjbt.substr(0,5)+'...';
                    });
                    let tipsInfo = bhArr[0]+' '+bhArr[1]+' ...' ;
                    if (type == 1) {
                        //同意
                        this.type = 1 ;
                        let ids = this.multipleSelection.map(it => {
                            return it.id;
                        });
                             const h = this.$createElement;
                              this.$msgbox({
                                  title: '同意以下考核事件申请',
                                  message:h('p', null, [
                                      h('span', { style: 'font-size: 16px' },tipsInfo.toString()),
                                  ]),
                                  showCancelButton: true,
                                  confirmButtonText: '确定',
                                  cancelButtonText: '取消',
                                  beforeClose: (action, instance, done) => {
                                      if (action === 'confirm') {
                                          this.confirmAgree() ;
                                          done();

                                      } else {
                                          done();
                                      }
                                  }
                              }).then(action => {

                              });
                    } else {
                        // 驳回
                        this.type = 0 ;
                        let bhArr = this.multipleSelection.map(it => {
                            return it.sjbt.substr(0,5)+'...';
                        });
                        let tipsInfo = bhArr[0]+' '+bhArr[1]+' ...' ;

                        const h = this.$createElement;
                        this.$msgbox({
                            title: '驳回以下考核事件申请',
                            message:h('p', null, [
                                h('span', { style: 'font-size: 16px' },tipsInfo.toString())
                            ]),
                            showCancelButton: true,
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            beforeClose: (action, instance, done) => {
                                if (action === 'confirm') {
                                    this.confirmAgree() ;
                                    done();
                                    // instance.confirmButtonLoading = true;
                                    // instance.confirmButtonText = '执行中...';
                                    // setTimeout(() => {
                                    // done();
                                    //     setTimeout(() => {
                                    // instance.confirmButtonLoading = false;
                                    //    }, 300);
                                    // }, 3000);
                                } else {
                                    done();
                                }
                            }
                        }).then(action => {
                            // this.$message({
                            //     type: 'info',
                            //     message: 'action: ' + action
                            // });
                        });
                    }
                }
            },

            //刷新
            refreshDataList(){
                this.getDataList() ;
            },
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true;
                let khtype = "";
                if(this.radio == 1){
                    khtype = 'ry';
                }
                if(this.radio == 2){
                    khtype = 'jg';
                }
                eventExamineList(
                    Object.assign(
                        {
                            current: this.pageIndex,
                            size: this.pageSize,
                            sjbt:this.searchForm.sjbt,
                            sjdesc:this.searchForm.sjdesc,
                            khzq: this.searchForm.khzq,
                            khtype:khtype,
                        },
                    ),
                   2
                )
                    .then(response => {
                        this.dataList =  response.data.data.records;//将考核人员列表变成字符串
                        this.totalPage = response.data.data.total;
                        this.dataListLoading = false;
                        this.dataList.forEach((ele) => {
                            ele.rowshows = true;
                        });
                    })
                    .catch(() => {
                        this.dataListLoading = false;
                    });
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val;
                this.pageIndex = 1;
                this.getDataList();
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val;
                this.getDataList();
            },
            //table表索引
            indexMethod(index) {
                return (this.pageIndex-1)*this.pageSize+index+1;
            },
            //参与人集合改成用"、"拼接成字符串
            changeDataFormat(arr){
               return  arr.map(it => {
                    it.khdxNameList = it.khdxNameList.join("、") ;
                    return it;
                });
            },
            closeDialog1() {
                this.detailVisible = false;
            },
            showUser(taskId) {
                this.taskId = taskId;
                this.usercommentTask = true;
                this.$nextTick(() => {
                    this.$refs.userTask.init("", "zxshr", JSON.stringify([]), "htcj");
                });
            },
            //显示流程图弹框
            // showMessage(proId) {
            //     showMessage(proId).then(res => {
            //         this.hisTableData = res.data.data;
            //     });
            //     this.actPicUrl = `/act/sp/view/` + proId;
            //     this.actPicUrlList = [];
            //     this.actPicUrlList.push(`/act/sp/view/` + proId);
            //     this.showPicDialog = true;
            // },
            // 显示信息
            showMessage(proId,row) {
                console.log(row);
                this.$refs.processTracking.init(proId);
            },
            //修改审批人
            submitfyTask(data) {
                if (data.tableDataUser.length != 1) {
                    this.$message.closeAll();
                    this.$message.error("请指定唯一的审批人");
                } else {
                    changeAss({
                        taskId: this.taskId,
                        userId: data.tableDataUser[0].userId
                    }).then(res => {
                        this.$message.closeAll();
                        this.$message.success("审批人更换成功");
                        this.showPicDialog = false;
                        this.getDataList();
                    });
                }
            },
            //数组
            cutout(cellValue) {
                if (cellValue) {
                    var c = cellValue.split(",");
                    if (c.size < 1) {
                        c.push("-");
                        c.push("-");
                    } else if (c.size < 2) {
                        c.push("-");
                    }
                    return c;
                }
            },
            //获取考核周期列表
            getKhzq(){
                getKhzqSelect().then(r => {
                    r.data.data.forEach((ele) => {
                        let item = {
                            name:ele.period,
                            value:ele.id
                        }
                        this.kezqsList.push(item);
                    });
                });

            },
            searchByZq(){
                this.getDataList() ;
            },
            //导出
            download() {
                var data = this.multipleSelection;
                if (data.length == 0) {
                    this.$message.closeAll();
                    this.$message.warning("请选择一个工作！");
                    return;
                }
                var filename = "事件审核数据" + ".xlsx";
                var ids = [];
                for (var i = 0; i < data.length; i++) {
                    ids.push(data[i].id);
                }
                exportExcelExamin({
                    ids: ids
                }).then(response => {
                    this.$message.closeAll();
                    this.$message.success("导出成功!");
                    let url = window.URL.createObjectURL(new Blob([response.data]));
                    let link = document.createElement("a");
                    link.style.display = "none";
                    link.href = url;
                    link.setAttribute("download", filename);
                    document.body.appendChild(link);
                    link.click();
                });
            },
        }
    };
</script>

<style lang="scss" scoped>
  /deep/.bg{box-shadow: -5px -5px 5px #AAAAAA, 5px 5px 5px #AAAAAA!important;}
</style>
